
<script setup lang="ts">
defineProps({
  item: {
    type: Object,
    default: () => ({})
  },
})
</script>
<template>
  <router-link class="list-item" :to="'/news/article?id=' + item.id">
    <div class="list-top flex align-center">
      <div class="date-wrap">
        <div class="md">{{ item.create_at }}</div>
        <div class="year font-sm">{{ item.year }}</div>
      </div>
      <div class="read flex-center">
        <div class="arrow"></div>
      </div>
    </div>
    <div class="list-bot">
      <div class="title line-1 font-m mb-1 text-black">{{ item.title }}</div>
      <div class="desc text-muted line-2 font-sm">{{ item.introduce }}</div>
    </div>
  </router-link>
</template>
<style lang="scss" scoped>
.list-item {
  position: relative;
  height: 250px;
  cursor: pointer;

  &:nth-child(2) {
    margin: 0 60px;
  }

  .list-top {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 96px;
    padding-left: 25px;
    color: #626675;
    border-radius: 12px;

    .md {
      font-size: 24px;
    }

    .year {
      font-size: 14px;
    }

    .read {
      position: absolute;
      right: 100px;
      width: 35px;
      height: 35px;
      border: 1px solid #fff;
      transition: all 0.6s ease 0s;

      .arrow {
        width: 6px;
        height: 6px;
        border: solid 1px;
        border-color: #fff #fff transparent transparent;
        transform: rotate(45deg);
      }
    }
  }

  .list-bot {
    position: absolute;
    left: 0;
    top: 96px;
    width: 100%;
    height: 154px;
    padding-top: 42px;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 1px;
      background-color: #C6C6C6;
    }
  }

  .list-top,
  .list-bot {
    transition: all 0.3s ease 0s;
  }

  &:hover {
    .list-top {
      top: 154px;
      padding-left: 80px;
      color: #fff;
      background-image: linear-gradient(to right, #3888FF, #6c71FF, #AA58FA, #FB6D86);

      .read {
        right: 230px;
      }
    }

    .list-bot {
      top: 0;

      &::before {
        background-image: linear-gradient(to right, #3888FF, #6c71FF, #AA58FA, #FB6D86);
      }
    }
  }
}
</style>